<template>
  <div>
    <!-- <button @click="testAxios">测试请求</button> -->
    <!-- <login></login> -->
    <!-- <reg></reg> -->

    <component
      :is="comName"
      @next="nextFn"
      :phone="phone"
      @prev="prevFn"
      @end="endFn"
      @prev2="prev2Fn"
      :answer="answer"
      :id="id"
    ></component>
    <!-- <step1 @next="nextFn"></step1> -->
  </div>
</template>

<script>
import login from "./components/login.vue";
import reg from "./components/reg.vue";
import step1 from "./components/step1.vue";
import step2 from "./components/step2.vue";
import step3 from "./components/step3.vue";
import axios from "axios";
export default {
  data() {
    return {
      comName: "step1",
      phone: "",
      answer: "",
      id: "",
    };
  },
  methods: {
    async testAxios() {
      const res = await axios({
        url: "http://124.223.14.236:3001/api/user/findPwd?phone=18756903550",
      });
      console.log(res);
    },
  },
  components: {
    login,
    reg,
    step1,
    step2,
    step3,
  },
  methods: {
    // 第一个页面的下一步
    nextFn(phone, value) {
      // console.log(phone, value);
      this.comName = value;
      this.phone = phone;
    },
    //第二个页面的上一步
    prevFn(value) {
      this.comName = value;
    },
    //第二个页面的下一步
    endFn(answer, id, value) {
      console.log(answer, value, id);
      this.comName = value;
      this.answer = answer;
      this.id = id;
    },
    // 第三个页面的上一步
    prev2Fn(value) {
      this.comName = value;
    },
  },
};
</script>

<style>
</style>
